<template>
  <div class="h_tabs">
    <van-divider>子组件嵌入</van-divider>
    <van-tabs v-model:active="activeName">
      <van-tab title="标签 1" name="a">
        <!-- <van-nav-bar
          title="Button 按钮"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        ></van-nav-bar> -->
        <van-divider>按钮类型</van-divider>
        <van-space wrap>
          <van-button type="primary">主要按钮</van-button>
          <van-button type="success">成功按钮</van-button>
          <van-button type="default">默认按钮</van-button>
          <van-button type="warning">警告按钮</van-button>
          <van-button type="danger">危险按钮</van-button>
        </van-space>
        <van-divider>按钮尺寸</van-divider>
        <van-space wrap>
          <van-button type="primary" size="large">大号按钮</van-button>
          <van-button type="primary" size="normal">普通按钮</van-button>
          <van-button type="primary" size="small">小型按钮</van-button>
          <van-button type="primary" size="mini">迷你按钮</van-button>
        </van-space>
        <van-divider>细边框按钮</van-divider>
        <van-space wrap>
          <van-button plain hairline type="primary">细边框按钮</van-button>
          <van-button plain hairline type="success">细边框按钮</van-button>
        </van-space>
        <van-divider>图标按钮</van-divider>
        <van-space wrap>
          <van-button icon="plus" type="primary"></van-button>
          <van-button icon="plus" type="primary">按钮</van-button>
          <van-button
            icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"
            plain
            type="primary"
          >
            按钮
          </van-button>
        </van-space>
      </van-tab>
      <van-tab title="标签 2" name="b">内容 2</van-tab>
      <van-tab title="标签 3" name="c">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "h-tabs",
  setup() {
    const activeName = ref("a");
    return { activeName };
  },
  // 注册组件
  components: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.h_tabs {
  max-height: 60%;
}
</style>
